<template>
  <div class="homeSider m-no-select" @mousedown.self="movingWindow(true)" @mouseup.self="movingWindow(false)">
    <div class="homePerson">
      <div class="person_wrap">
        <div class="person_main" @click.stop.prevent="toMyInfo">
          <!-- zk1218修改head -> headImage -->

          <img :class="{ gray: personalStatus == 4 }" class="head_img" draggable="false" :src="isService ? 'static/image/service/customer_service_avatar.png' : !$isNull(myInfo.headImage)
              ? `${$store.state.headPathUrl}${myInfo.id}${myInfo.headImage}.PNG`
              : `static/image/home/person_${myInfo.gender == 1 ? 1 : 2}.png`
            " :onerror="defaultImg" />
          <!-- <img :class="{gray:personalStatus==4}" class="head_img" draggable="false" :src="!$isNull(myInfo.head)&&!$isNull(myInfo.myHeadPath)?(myInfo.myHeadPath):`static/image/home/person_${myInfo.gender==1?1:2}.png`" :onerror="defaultImg"> -->
          <img class="state_icon" v-show="personalStatus != 0 && personalStatus != 4" :src="personalStatus == 1
              ? 'static/image/home/state_busy_corner.png'
              : personalStatus == 2
                ? 'static/image/home/state_leave_corner.png'
                : personalStatus == 3
                  ? 'static/image/home/state_meeting_corner.png'
                  : 'static/image/home/state_input_corner.png'
            " />
        </div>
        <div class="my_state" @click.stop.prevent="toSetStatus">
          <div>
            <img src="static/image/home/state_edit.png" />
            <div>{{ cur_state == "" ? "在线..." : cur_state }}</div>
          </div>
        </div>
      </div>
      <div class="work_state" @click.stop.prevent="" v-show="state_show">
        <div class="w_k_top">
          <p>{{ "自定义" }}</p>
          <div class="state_i_w">
            <i-input clearable v-model="state_input_value" ref="state_ref"></i-input>
          </div>
          <div class="state_btn_w">
            <button class="determine_btn" @click="set_sure_state">确定</button>
            <button class="default_btn" @click="cancel_state_update">
              取消
            </button>
          </div>
          <div class="w_k_sel">快速选择</div>
        </div>
        <ul class="status_list">
          <li v-for="(s, i) in state_list" @click="check_state_value(i)" :key="i + 'state'">
            <img :src="s.url" />
            <div>{{ s.text }}</div>
          </li>
        </ul>
      </div>
      <Card class="homeCard" v-show="myCardShow">
        <div @click.stop="">
          <div class="homeCardFirst">
            <!-- zk1223新增,添加点击事件 -->
            <span class="h_c_h_w" @click="uploadHeadImg" v-loading='imgLoading'>
              <img draggable="false" class="img-border" :src="isService ? 'static/image/service/customer_service_avatar.png' :
                  !$isNull(myInfo.headImage)
                    ? `${$store.state.headPathUrl}${myInfo.id}${myInfo.headImage}.PNG`
                    : `static/image/home/person_${myInfo.gender == 1 ? 1 : 2
                    }.png`
                " :onerror="defaultImg" />

              <!-- <input  type="file" v-if='myInfo.isPhoto==1' id="head_file" @change='fileChange'/> -->
            </span>
            <div class="card_n">
              <h2>
                <b>{{ myInfo.name }}</b>
              </h2>
              <div class="card-service" v-if="myInfo.authCustservice" @click="changeService">
                <img src="static/image/service/account_switching.png">
                <span class="card-service-span" v-show="isService">切换个人账号</span>
                <span class="card-service-span" v-show="!isService">切换客服账号</span>
              </div>
            </div>
            <div class="card_close" @click.stop.prevent="toMyInfo">
              <img src="static/image/home/closeWindow.png" />
            </div>
            <img src="static/image/home/edit.png" class="myinfo_edit_btn" @click.stop.prevent="editShowFn" />
          </div>
          <ul @click.stop.prevent="" class="myinfo_card">
            <li v-for="(item, index) in personInfoList" :key="index + 'card'">
              <span :style="{ marginRight: index == '5' ? '30px' : '45px' }">{{
                item.title
              }}</span>
              <template v-if="index < 3">
                <span v-if="index != 2">{{
                  !$isNull(myInfo[item.field]) ? myInfo[item.field] : "--"
                }}</span>
                <span v-else>{{ myInfo[item.field] == 2 ? "女" : "男" }}</span>
              </template>
              <Tooltip v-else class="dxTooltip" :content="!$isNull(myInfo[item.field]) ? myInfo[item.field] : '--'
                " placement="top">
                <span>{{
                  !$isNull(myInfo[item.field]) ? myInfo[item.field] : "--"
                }}</span>
              </Tooltip>
            </li>
          </ul>
        </div>
      </Card>
    </div>
    <template v-for="(item, index) in siderArray">
      <Tooltip :content="item.title" placement="right" :key="'sider_' + index" v-show="index != 2">
        <div class="homeSider_project" @click="setSider(index)">
          <img draggable="false" :src="item.active ? item.src : item.url" />
          <span v-if="index == 0 && noReadSessionNum > 0" :class="noReadSessionNum >= 100
              ? 'number_tip_three'
              : noReadSessionNum >= 10
                ? 'number_tip_two'
                : 'number_tip_one'
            ">{{ noReadSessionNum >= 99 ? "99+" : noReadSessionNum }}</span>
          <span v-if="index == 3 && officialManageTotal + broadNoRead > 0" :class="officialManageTotal + broadNoRead >= 100
              ? 'number_tip_three'
              : officialManageTotal + broadNoRead >= 10
                ? 'number_tip_two'
                : 'number_tip_one'
            ">{{
    officialManageTotal + broadNoRead >= 99
    ? "99+"
    : officialManageTotal + broadNoRead
  }}</span>
        </div>
      </Tooltip>
    </template>
    <Tooltip content="发起群聊" placement="right">
      <div title="发起群聊" @click="setModalFirst(0)" v-show="myInfo.groupOf == '1'" class="btn_group_add"></div>
    </Tooltip>
    <Tooltip content="客服转派" placement="right">
      <div title="客服转派" @click="showService()" v-show="myInfo.authCustservice" class="btn_service"></div>
    </Tooltip>
    <Tooltip content="设置" placement="right" class="homeSider_set">
      <img v-if="isUpdateExeShow" src="static/image/home/updateExe/menu_new.png" />
      <div class="setting_icon" :class="{ active: config_active }" @click.stop.prevent="configMain_show"></div>
    </Tooltip>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  props: {
    imgLoading: {
      default: false,
    },
    personalStatus: {
      type: Number,
      default: 0,
    },
    cur_state: {
      type: String,
      default: "",
    },
    state_show: {
      type: Boolean,
      default: false,
    },
    myCardShow: {
      type: Boolean,
      default: false,
    },
    siderArray: {
      type: Array,
      default: [
        {
          title: "会话",
          url: "static/image/home/btn_news_nor.png",
          src: "static/image/home/btn_news_sel.png",
          active: true,
        },
        {
          title: "通讯录",
          url: "static/image/home/btn_contact_nor.png",
          src: "static/image/home/btn_contact_sel.png",
          active: false,
        },
      ], //侧边栏列表
    },
    config_active: {
      type: Boolean,
      default: false,
    },
    broadNoRead: {
      type: Number,
      default: 0,
    },
    sessionList: {
      type: Array,
      default: [],
    },
    isUpdateExeShow: {
      type: Boolean,
      default: false,
    },
    showUpdatePicForm: {
      type: Function,
      default: null,
    },
    officialManageTotal: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      // defaultImg:'this.src="' + require('../../../static/image/home/person_1.png') + '"',//home/person_1.png/image/face/2.gif
      defaultImg: 'this.src="static/image/home/person_1.png"',
      state_input_value: "",
      state_list: [
        {
          url: "static/image/home/state_on_line.png",
          text: "在线",
        },
        {
          url: "static/image/home/state_busy.png",
          text: "忙碌中",
        },
        {
          url: "static/image/home/state_leave.png",
          text: "离开",
        },
        {
          url: "static/image/home/state_meeting.png",
          text: "会议中",
        },
        {
          url: "static/image/home/state_off_line.png",
          text: "离线",
        },
      ],
      noReadSessionNum: 0,
    };
  },
  watch: {
    sessionList() {
      this.getNoReadNum();
    },
    isUpdateSessionList() {
      this.getNoReadNum();
    },
  },
  computed: {
    ...mapState([
      "myInfo",
      "user_hot_key",
      "personInfoList",
      "isUpdateSessionList",
      "chating",
      "b4Leave",
      "isService",
    ]),
  },
  methods: {
    ...mapMutations(["setChating", "changeService"]),
    movingWindow(i) {
      //鼠标抬起放下事件
      this.$shell("LeftSideIsClick", [i]);
      return false;
    },
    getNoReadNum() {
      this.noReadSessionNum = 0;
      this.sessionList.map((item) => {
        this.noReadSessionNum += parseInt(item.noRead);
      });
      this.$forceUpdate();
    },
    check_state_value(index) {
      this.$emit("check_state_value", index);
    },
    toMyInfo() {
      this.$emit("toMyInfo");
    },
    toSetStatus() {
      this.$emit("toSetStatus");
    },
    setSider(index) {
      // 2022/4/18 zc 新增切换导航栏清空聊天记录搜索对象和时间
      this.$emit("setSider", index);
      this.$bus.$emit("clearSearch");
      //zk新增，如果不为会话框，将chating状态变为falses
      if (index == 0) {
        console.log(this.b4Leave, "回来时的chating状态");
        this.setChating(this.b4Leave);
      } else {
        this.setChating(false);
      }
    },
    set_sure_state() {
      if (this.state_input_value == "") {
        this.$Message.warning("请输入有效字符");
        return;
      }
      this.$emit("set_sure_state", this.state_input_value);
    },
    cancel_state_update() {
      this.state_input_value = "";
      this.$emit("cancel_state_update");
    },
    showService() {
      this.$emit("showService");
    },
    setModalFirst() {
      this.$emit("setModalFirst", 0);
    },
    configMain_show() {
      this.$emit("configMain_show");
    },
    editShowFn() {
      this.$emit("editShowFn");
    },
    fileChange(e) {
      this.$emit("fileChange", e);
    },
    uploadHeadImg() {
      console.log(this.myInfo, "头像权限");
      console.log(`${this.$store.state.headPathUrl}${this.myInfo.id}${this.myInfo.headImage}.PNG`)
      if (this.myInfo.isPhoto == 1) {
        //判断是否有权限
        let id = this.$func.uuid();
        this.showUpdatePicForm(id);
      }
    },
  },
};
</script>
<style scoped lang="less">
.card-service {
  width: 130px;
  margin-left: 30px;
}

.card-service-span {
  width: 61px;
  height: 11px;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #fa7500;
  cursor: pointer;
}
</style>
